import { actionQueue } from '../../tools/actionQueue';
import { toastStyle } from './toast.css';

class ToastBox {
	private toast: HTMLDivElement;
	constructor(msg: string) {
		this.toast = (
			<div class={toastStyle}>
				<div>{msg}</div>
			</div>
		) as HTMLDivElement;
	}
	create() {
		document.body.append(this.toast);
	}
	show() {
		this.toast.classList.add('active');
	}
	hide() {
		this.toast.classList.remove('active');
	}
	destory() {
		this.toast.remove();
	}
}

const toastQueue = actionQueue<ToastBox>(500);
export const Toast = {
	show(msg: string) {
		toastQueue.show(new ToastBox(msg), 2000);
	},
};
